<template>
  <div id="center">
    <div class="center-box">
      <div class="center-title">
        <h2 class="fl f18">我的e购</h2>
      </div>
      <div class="center-main mt36">
        <!-- 用户信息 -->
        <div class="usrtInfo">
          <div class="user-head fl circle">
             <img id="avater" :src="user.avater" style="width:100%;height:100%"  alt="">
          </div>
          <div class="userInfo-section mt15 ml24 fl">
            <dl class="userInfo-article mr24 fl">
              <dt class="welcome mt36">
                <span class="f21 fl">{{user.name}}</span>
                <span class="mt8 pl12 f13 color-888 fl">{{user.profile}}</span>
              </dt>
            </dl>
            <div class="userInfo-order mt26 tc fl">
              <div class="userInfo-item plr36 fl">
                <a>
                  <var class="f24">{{user.waitPay}}</var>
                  <p>待付款</p>
                </a>
              </div>

              <div class="userInfo-item plr36 fl">
                <a>
                  <var class="f24">{{user.waitRec}}</var>
                  <p>待确认收货</p>
                </a>
              </div>

              <div class="userInfo-item pl36 fl">
                <a>
                  <var class="f24">{{user.waitComment}}</var>
                  <p>待评价</p>
                </a>
              </div>
            </div>
          </div>
        </div>
        <!-- 交易提醒 -->
        <div class="user-section mt24 pt36">
          <div class="trading-order pr48 f13 fl">
            <div class="trading-hd">
              <h4 class="fl f16">交易提醒</h4>
            </div>
            <div class="trading-bd">
              <!-- 交易为空 -->
              <div class="user-empty tc" v-if="orders.length<=0">
                <p class="pt20">
                  <img :src="car" alt />
                </p>
                <div class="f13 color-c3">
                  <p>{{information1_1}}</p>
                  <p>{{information1_2}}</p>
                </div>
              </div>
              <div  v-if="orders.length>0">
                <div class="trading-item ptb24" v-for="(value,index) in orders" :key="index">
                  <div class="table">
                    <div class="tradingItem-pic table-cell">
                      <img :src="value.imgs.split(',')[0]" alt />
                    </div>
                    <div class="tradingItem-des plr24 table-cell">
                      <h6>{{value.product_name}}</h6>
                      <p class="color-c3 pt12">
                        <span>更新日期</span>
                         {{value.update_date}}
                      </p>
                    </div>
                     <div class="tradingItem-pic table-cell" style="padding-right: 8%; width: 20%;">
                        {{value.show_status}}
                    </div>
                    <div class=" table-cell" style="width: 20%;">
                      <!-- <el-button type="primary">确认收货</el-button> -->
                      <el-link type="primary" @click="fukuan(value.id)" v-if="value.status == 1" >去付款</el-link>
                      <el-link type="primary" v-if="value.status == 4" @click="()=>{ $router.push('/personal/evaluate?active=3')}" >去评价</el-link>
                      <el-link type="primary" @click="souhuo(value.id)" v-if="value.status == 3" >确认收货</el-link>
                    </div>
                  </div>
                </div>
              </div>
            
            </div>
          </div>
          <div class="trading-cart pl48 f13 fl">
            <div class="trading-hd">
              <h4 class="f16 fl">购物车</h4>
              <router-link class="f13 color-888 fr" tag="a" to="/shopping">更多</router-link>
            </div>
            <div class="trading-bd">
              <!-- 购物车为空 -->
              <div class="user-empty tc" v-if="carts.length <= 0">
                <p class="pt20">
                  <img :src="cart" alt />
                </p>
                <div class="f13 color-c3">
                  <p>{{information2_1}}</p>
                  <p>{{information2_2}}</p>
                </div>
              </div>
              <div v-if="carts.length > 0" >
                <div class="trading-item ptb24" v-for="(value,index) in carts" :key="index">
                  <div class="table hover">
                    <div class="tradingItem-pic table-cell">
                      <img :src="value.imgs.split(',')[0]"  alt />
                    </div>
                    <div class="tradingItem-des pl24 table-cell">
                      <h4>{{value.product_name}}</h4>
                      <br><br>
                      <span>￥{{value.shop_price}}</span>
                    </div>
                  </div>
                </div>
              </div>
            
            </div>
          </div>
        </div>
        <!-- 我的喜欢 -->
        <div class="user-section mt24 pt36">
          <div class="favorte-hd pr12">
            <h4 class="inline-block f16 fl">喜欢的商品</h4>
            <router-link class="f13 color-888 fr" tag="a" to="/personal/favorite">更多</router-link>
          </div>
          <div class="favorte-bd mt24">
            <!-- 喜欢为空 -->
            <div class="user-empty tc" v-if="favortes.length<=0">
              <p class="pt20">
                <img :src="hart" alt />
              </p>
              <div class="f13 color-c3">
                <p>{{information3}}</p>
              </div>
            </div>
            <ul class="prolist-inner" v-if="favortes.length > 0">
              <li class="prolist-item fl" v-for="(value,index) in favortes" :key="index">
                <router-link class="prolist-box" tag="a" to="/detail">
                  <div class="prolist-image mb13">
                    <img :src="value.imgs.split(',')[0]" alt />
                  </div>
                  <div class="prolist-article">
                    <h3 class="prolist-title">{{value.productName}}</h3>
                    <div class="prolist-tag">
                      <div class="prolist-price">
                        <span>￥{{value.shopPrice}}</span>
                      </div>
                    </div>
                  </div>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../../../../api/axios";
export default {
  data() {
    return {
      title: "我的e购",
      user:{},
      information1_1: "你还没有买过任何商品",
      information1_2: "要不要四处看看",
      information2_1: "这里空空如也",
      information2_2: "不如到处逛逛吧",
      information3: "你还没有喜欢过任何商品",
      car: require("../../../../assets/img/car.png"),
      cart: require("../../../../assets/img/cart.png"),
      hart: require("../../../../assets/img/hart.png"),

      orders: [
  
      ],
      carts: [
    
      ],
      favortes: [
      ]
    };
  },
  created(){
    this.init()
  },
  methods: {
    fukuan(val){
      this.axios.post("/order/fukuan",{
        id:val
      }).then((resp)=>{
          var win = window.open("","_blank")
          win.document.write(resp.data)
      })
    },
    init(){
       axios.post("/user/center").then((resp)=>{
        this.user =resp.data.user
        this.user.waitPay = resp.data.wait?resp.data.wait: 0
        this.user.waitRec = resp.data.waitRec?resp.data.waitRec: 0
        this.user.waitComment =resp.data.waitComment?resp.data.waitComment: 0
        if(resp.data.fav.length > 4){
          this.favortes = resp.data.fav.slice(3)
        }else{
          this.favortes = resp.data.fav
        }
        if(resp.data.cart.length > 3){
          this.carts = resp.data.cart.slice(2)
        }else{
          this.carts = resp.data.cart
        }
        if(resp.data.order.length > 3){
          this.orders = resp.data.orders.slice(2)
        }else{
          this.orders = resp.data.order
        }

      })
    },
    souhuo(id){
          this.axios.post("order/update",{
            id:id,
            status:4
          }).then(resp=>{
            if(resp.code ==0){
                this.$message.success(resp.msg)
                this.init()
            }else{
                this.$message.error(resp.msg)
            }
          })
        }
    },
};
</script>

<style scoped>
#center {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 2%;
  /* background-color: aqua; */
}

/* 整体框架 */
#center .center-box {
  width: 1080px;
  min-height: 600px;
  margin: 36px auto 0 auto;
  /* margin-top: 36px;
  margin-left: auto;
  margin-right: auto; */
}

/* 标题 */
.center-box .center-title {
  width: 100%;
  height: 22px;
}

/* 内容 */
.center-box .center-main {
  min-height: 530px;
  /* background-color: antiquewhite; */
}

/* 用户信息 */
.center-box .center-main .usrtInfo {
  height: 120px;
}
.usrtInfo .user-head {
  width: 120px;
  height: 120px;
  cursor: pointer;
  background-color: black;
}
.usrtInfo .userInfo-section {
  width: 900px;
  height: 94px;
  /* background-color: darkgray; */
}
.usrtInfo .userInfo-section .userInfo-article {
  width: 495px;
  height: 100%;
  /* background-color: blue; */
}
.usrtInfo .userInfo-section .userInfo-article .welcome {
  height: 24px;
}
.usrtInfo .userInfo-section .userInfo-order {
  width: 360px;
  height: 48px;
  overflow: hidden;
  /* background-color: blueviolet; */
}
.usrtInfo .userInfo-section .userInfo-order .userInfo-item {
  margin-left: -1px;
  height: 48px;
  border-left: 1px dotted #d3d7d7;
}
.usrtInfo .userInfo-section .userInfo-order .userInfo-item a:hover p {
  text-decoration: underline;
}

/* 交易提醒 */
.user-section {
  /* height: 215px; */
  overflow: hidden;
  border-top: 1px solid #ddd;
  /* background-color: aquamarine; */
}
.trading-hd {
  height: 22px;
}
.user-section .trading-order {
  width: 590px;
  /* height: 213px; */
  border-right: 1px dotted #d3d7d7;
  /* background-color: burlywood; */
}
/* .user-section .trading-order .trading-bd {
  height: 191px;
} */
.user-empty {
  margin: 36px auto 0;
  width: 155px;
}
.tradingItem-des {
  width: 348px;
}
.tradingItem-des p,
.tradingItem-des p span {
  font-size: 13px;
}
.user-section .trading-cart {
  margin-left: -1px;
  width: 360px;
  /* height: 214px; */
  border-left: 1px dotted #d3d7d7;
  /* background-color: cadetblue; */
}

/* 购物车 */
.trading-item {
  margin-top: -1px;
  height: 114px;
  /* width: 297px; */
  /* border-top: 1px dotted #d1d6d6; */
  background-color: white;
  /* background-color: aquamarine; */
}

.table,
.table-cell {
  vertical-align: middle;
}
.table {
  height: 100%;
  width: 100%;
  /* background-color: blue; */
}
.table-cell {
  display: table-cell;
  /* float: left; */
}
.tradingItem-pic {
  height: 100%;
  width: 114px;
}
.tradingItem-pic img {
  /* height: 100%; */
  width: 114px;
}
.tradingItem-des {
  height: 100%;
  /* width: 41.92%; */
  text-align: left;
  /* background-color: antiquewhite; */
}
.tradingItem-des h6 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.tradingItem-des span {
  font-size: 18px;
}
.hover:hover {
  margin-top: -2px;
  box-shadow: 0 0 30px #ccc;
  cursor: pointer;
}

/* 我的喜欢 */
.favorte-hd {
  overflow: hidden;
}
.favorte-hd .inline-block {
  display: inline-block;
}
.favorte-bd {
  position: relative;
  /* height: 133px; */
  /* background-color: crimson; */
}
.favorte-bd .prolist-inner {
  /* margin-left: -24px; */
  overflow: hidden;
  margin-top: 0;
  height: 100%;
  /* background-color: crimson; */
}
.user-section .prolist-item {
  width: 231px;
  height: 325px;
  margin-left: 24px;
  margin-top: 0;
  border: 1px solid #fff;
}
.prolist-item {
  /* background-color: blueviolet; */
}
.prolist-box,
.prolist-image {
  position: relative;
  width: inherit;
}
.user-section .prolist-image {
  width: 231px;
  height: 231px;
  /* background-color: chartreuse; */
}
.prolist-image img {
  width: 100%;
}
.prolist-article {
  overflow: hidden;
  font-size: 12px;
}
.prolist-article .prolist-title {
  overflow: hidden;
  height: 36px;
  font-size: 14px;
  line-height: 18px;
  /* text-align: left; */
  /* background-color: cyan; */
}
.prolist-title h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.prolist-article .prolist-tag {
  /* color: #777; */
  font-size: 18px;
  color: #29a3d6;
}
.prolist-article .prolist-price {
  position: relative;
  margin-top: 13px;
  height: 18px;
  line-height: 18px;
  text-align: left;
  /* background-color: darkorange; */
}
.prolist-price span {
  font-size: 18px;
  /* text-align: left !important; */
}
.prolist-inner .prolist-item:hover {
  cursor: pointer;
  border: 1px solid #d1d6d6;
}
</style>